<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Color My Own Beauty.</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body class="contact">
        <header class="header" id="header">
            <nav class="nav">
                <a href="#" class="nav__logo">
                    <div>
                        <!-- <img src="img/ts_logo_2x-v2.png" alt="Logo" /> -->
                        Color My Own Beauty.
                    </div>
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list" data-lang="en" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">Theory</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">Test</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">Contact</a></li>
                    </ul>
                    <ul class="nav__list" data-lang="zh" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">首页</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">四季理论</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">测试</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">联系我们</a></li>
                    </ul>
                    <div class="switch">
                        <label class="switch-labels left">EN</label>
                        <input type="checkbox" id="langToggle" onchange="toggleLang()" />
                        <span class="slider round"></span>
                        <label class="switch-labels right">CN</label>
                    </div>
                </div>
            </nav>
        </header>
        <main>
            <div class="left">
                <img src="https://cdn.pixabay.com/photo/2017/01/27/16/09/girl-2013447_1280.jpg" alt="" />
            </div>
            <div class="right" data-lang="en" data-display="block">
                <h1>Contact Us</h1>
                <p>
                    If you have any questions or concerns, please do not hesitate to contact us.We are always happy to
                    assist you.
                </p>

                <form action="">
                    <div class="item">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" placeholder="please enter your name" required />
                    </div>

                    <div class="item">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" placeholder="please enter your email" required />
                    </div>

                    <div class="item">
                        <label for="message">Message:</label>
                        <textarea
                            id="message"
                            name="message"
                            placeholder="please enter your message"
                            required></textarea>
                    </div>

                    <button type="submit" class="btn">Send</button>
                </form>
            </div>
            <div class="right" data-lang="zh" data-display="block">
                <h1>联系我们</h1>
                <p>如果您有任何问题或疑虑，请不要犹豫与我们联系。我们总是很乐意帮助你。</p>

                <form action="">
                    <div class="item">
                        <label for="name">姓名:</label>
                        <input type="text" id="name" name="name" placeholder="请输入您的姓名" required />
                    </div>

                    <div class="item">
                        <label for="email">邮箱:</label>
                        <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required />
                    </div>

                    <div class="item">
                        <label for="message">留言:</label>
                        <textarea id="message" name="message" placeholder="请填写您的留言" required></textarea>
                    </div>

                    <button type="submit" class="btn">提交</button>
                </form>
            </div>
        </main>

        <footer>
            <p>© 2024 Color My Own Beauty. All rights reserved.</p>
        </footer>

        <script>
            const zhDiv = document.querySelectorAll('[data-lang="zh"]');
            const enDiv = document.querySelectorAll('[data-lang="en"]');

            zhDiv.forEach(function (el) {
                el.style.display = 'none';
            });

            function toggleLang() {
                var checkbox = document.getElementById('langToggle');
                if (checkbox.checked) {
                    // Change to Chinese
                    document.documentElement.lang = 'zh';
                    console.log('Switched to Chinese');
                    zhDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    enDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                } else {
                    // Change to English
                    document.documentElement.lang = 'en';
                    console.log('Switched to English');
                    enDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    zhDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                }

                // Here you would add code to actually change the text on the page.
                // For example, you could use a dictionary object or fetch new content from the server.
            }
        </script>
    </body>
</html>
